import React from 'react'
import { Button, Field, Form,NavBar,Toast } from 'react-vant';
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux"
import * as Action from "../../actions/index"
function Addaddress() {
    const [form] = Form.useForm();
    const navigate=useNavigate()
    const dispatch = useDispatch()
    const onFinish = (values:object) => {
        console.log(values);
        let obj={
            id:new Date().getTime(),
            ...values
        }
        console.log(obj);
        
        dispatch(Action.add_address(obj))
        navigate("/address")
    };
    return (
        <div>
            <NavBar
                title="标题"
                leftText="返回"
                rightText="新增地址"
                onClickLeft={() => navigate("/address")}
                onClickRight={() => navigate("/address")}
            />
            <Form
                form={form}
                showValidateMessage={false}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType="submit" type="primary" block>
                            提交
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    intro="确保这是唯一的用户名"
                    rules={[{ required: true, message: '请填写用户名' }]}
                    name="name"
                    label="用户名"
                >
                    <Field placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item rules={[{ required: true, message: '请填写住址' }]} name="address" label="住址">
                    <Field placeholder="请输入住址" />
                </Form.Item>
                <Form.Item rules={[{ required: true, message: '请填写手机号' }]} name="phone" label="手机号">
                    <Field placeholder="请输入手机号" />
                </Form.Item>
                <Form.Item rules={[{ required: true, message: '请填写楼层' }]} name="floor" label="楼层">
                    <Field placeholder="请输入楼层" />
                </Form.Item>
            </Form>
        </div>
    )
}

export default Addaddress